<template>
  <div class="CadrePersonnel">
    <div class="flex location-wrap">
        <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ResourceAllocation' }">资源调配</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ResourceStatisticsList' }">资源投入统计</el-breadcrumb-item>
        <el-breadcrumb-item>应急救援基干队员信息明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box" style="height:872px">
      <div style="height:50px">
        <el-row style="float:right;margin:auto">
          <el-button size="medium" @click="AddFh">返回</el-button>
        </el-row>
      </div>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSequenceFlag="table.isSequenceFlag" />
    </div>
  </div>
</template>

<script>
import { Members } from "@/api/EmergencyDisposal/zydp.js";
export default {
  name: "CadrePersonnel",
  components: {},
  data() {
    return {
      type: 0,
      // 表格信息
      table: {
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        title: "应急救援基干队员信息明细",
        tableData: [],
        columns: [

          {
            prop: "unit",
            label: "所属地市级单位",
            align: "center"
          },
          {
            prop: "department",
            label: "所属县公司/部门",
            align: "center"
          },
          {
            prop: "name",
            label: "姓名",
            align: "center"
          },
          {
            prop: "contact",
            label: "联系方式",
            align: "center"
          },
          {
            prop: "teamName",
            label: "队伍名称",
            align: "center"
          },
          {
            prop: "memberType",
            label: "人员类型",
            align: "center"
          },
          {
            prop: "memberMajor",
            label: "人员专业",
            align: "center"
          },
          {
            prop: "memberAbility",
            label: "特种作业能力",
            align: "center"
          },
          {
            prop: "entryTime",
            label: "入岗时间",
            align: "center",
            fixed: "right"
          }
        ],
        // 表格样式
        tableAttr: {
          "max-height": "580px",
          height: "580px",
          stripe: true,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          },
          "row-style": {
            height: "60px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10

      },
      pageNum: 1,
      pageSize: 10
    };
  },
  mounted() {

  },
  created() {
    this.getCadrePersonnel();// 获取基干人员信息
  },
  methods: {
    // 返回上一级
    AddFh() {
      this.$router.go(-1);
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      // this.list()
      this.getCadrePersonnel();

    },
    getCadrePersonnel() {
      Members({ "sourceInfoId": this.$route.query.id, "type": "yjjg", "pageNum": this.pageNum, "pageSize": this.pageSize }).then(res => {
        this.table.tableData = res.data;
        this.paginationAtrrs.total = res.total;
      });
    }

  }
};
</script>

<style scoped lang="less">
//@import "../../../assets/style/ComponentStyle.less";
:deep(.el-breadcrumb) {
  font-size: 16px;
}
:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
  font-size: 16px;
}
.CadrePersonnel :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
  font-size: 16px;
}
.box {
  // width: 100%;
  // height: 80vh;
  // padding: 0;
  // margin: 0;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
